import React, { useEffect,useState,useMemo } from "react";
import axios from "../../request/index";
import { useLocation,useNavigate } from "react-router-dom";
import { NavBar } from 'antd-mobile';
import styles from './index.module.css'
import { Tabs } from 'antd-mobile'
const Search = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const { start, end, time } = location.state;
  const [data,setData] = useState([]);

  const getData=async()=>{
    const res=await axios.get('/api/trip/airplane',{
      params:{
        start,
        end,
        time
      }
    })
    setData(res.data.data.body.fl)
  }
  const handleDetail=(item)=>{
    navigate('/detail')
    localStorage.setItem('detail',JSON.stringify(item))
  }
  
  useEffect(() => {
    getData()
  }, []);
  return <div className={styles.search}>
        <NavBar onBack={()=>navigate(-1)} right={time}>
          {start}-{end}
        </NavBar>
        <Tabs>
          <Tabs.Tab title='火车' key='fruits'>
          <ul className={styles.searchList}>
     {
      data.map((item,index)=>{
        return  <li key={index} onClick={()=>handleDetail(item)}>
        <div className={styles.searchLeft}>
          <div className={styles.searchLeftTop}>
            <p className={styles.searchP}>
              <span>{item.dst}</span>
              <span>{item.dasn}</span>
            </p>
            <p className={styles.searchP}>
              <span style={{fontWeight:'normal',fontSize:'12px'}}>{item.amn}</span>
              <span style={{fontWeight:'normal',fontSize:'12px'}}>-------------</span>
            </p>
            <p className={styles.searchP}>
              <span>{item.ast}</span>
              <span>{item.aasn}</span>
            </p>
          </div>
          <div className={styles.searchLeftBottom}>
            <p>{item.asn} | {item.aat}</p>
          </div>
        </div>
        <div className={styles.searchRight}>
          ￥{item.atp}
        </div>
      </li>
      })
     }
    </ul>
          </Tabs.Tab>
          <Tabs.Tab title='顺风车' key='vegetables'>
          顺风车
          </Tabs.Tab>
          <Tabs.Tab title='中转' key='animals'>
          中转
          </Tabs.Tab>
        </Tabs>
 
  </div>;
};

export default Search;
